import React from "react";

const Collection = () => {

    const navigate = React.$Router.useNavigate();

    const [LoginAuth, setLoginAuth] = React.useState(React.$Cookies.load('LoginAuth') ? React.$Cookies.load('LoginAuth') : {})

    const [list, setList] = React.useState([])

    const [finished, setFinished] = React.useState(false)

    const page = React.useRef(1)
    const listRef = React.useRef([])


    const getCollectionData = async () => {
        setFinished(true)
        let result = await React.$Api.CollectionData({ busid: LoginAuth.id, page: page.current });

        if (result.code === 1) {
            listRef.current = listRef.current.concat(result.data)
            setList(listRef.current)
            page.current = page.current + 1
            setFinished(false)
        } else {
            setFinished(true)
            return false
        }
    }

    const onRefresh = () => {
        return new Promise(resolve => {
            setTimeout(() => {
                listRef.current = []
                setList([])
                page.current = 1
                resolve(true)
                setFinished(false)
            }, 1000)
        })
    }

    const load = () => {
        getCollectionData();
    }

    const Porduct = () => {
        if (JSON.stringify(list) !== '[]') {
            return list.map((item) => {
                return (
                    <React.$Router.NavLink to={`/product/product/info?id=${item.proid}`}>
                        <React.$Vant.ProductCard
                            key={item.id}
                            price={item.product.rent_price}
                            title={item.product.name}
                            thumb={item.product.thumb_cdn}
                            tags={
                                <>
                                    <React.$Vant.Tag plain type="danger" style={{ marginRight: 5 }}>
                                        押金{item.product.rent}
                                    </React.$Vant.Tag>
                                </>
                            }
                        />
                    </React.$Router.NavLink>
                )
            })
        }else{
            return <React.$Vant.Empty image="search" description="暂无收藏" />
        }
    }

    return (
        <>
            <React.$Vant.NavBar
                title="我的收藏"
                leftText="返回"
                onClickLeft={() => { navigate(-1) }}
            />

            <React.$Vant.PullRefresh onRefresh={onRefresh}>
                {/* List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果 */}
                <React.$Vant.List finished={finished} onLoad={load}>
                    <Porduct></Porduct>
                </React.$Vant.List>
            </React.$Vant.PullRefresh>


        </>
    )
}

export default Collection